<template>
  <div class="creditThe">
    <!--信用导航-->
    <nav class="navNumLi">
      <li v-for="(creditNav,i) in creditTheData" :class="{'selected': creditNav.code === creditNavTrigger}"
          @click="creditNavEvent(creditNav.code,i)">{{creditNav.name}}
      </li>
    </nav>
    <div class="creditTabs displayFlex">
      <div class="creditTabsLeft">
        <!--双面-->
        <div class="creditTabSided" v-if="creditLottery.TwoSided">
          <div class="creditTabMain creditTabMainSM displayFlex" v-for="(creditList,listIndex) in creditTheListData">
            <section>{{creditList.name}}</section>
            <section class="num bothSides">
              <p v-for="(data,dataIndex) in creditList.dataList"
                 @click="colorSelectionEvent(data,creditList,listIndex,dataIndex, data.amount,'.creditTabMainSM')"
                 v-on:mousedown="colorMouseDown($event,data,creditList,listIndex,dataIndex, data.amount,'.creditTabMainSM')"
                 :class="{'creditLotData': data.numTrue}">
                {{data.name}}
                <span>赔率{{data.odds}}</span>
                <span class="credAmountDiv">0</span>
              </p>
            </section>
          </div>
        </div>
        <!--整合-->
        <!--3极导航-->
        <nav class="creditThreeComNav" v-if="creditLottery.happyMark">
          <li v-for="(creditList,listIndex) in creditTheListData" :class="{'on': listIndex === creditHappyId}"
              @click="creditListEvent(listIndex)">{{creditList.name}}
          </li>
        </nav>
        <div class="creditTabIntegration" v-if="creditLottery.integration">
          <div class="creditTabMain creditTabMainZH" v-for="(creditList,listIndex) in creditTheListData"
               :class="{'creditTabHidden': creditLottery.happyMark, 'creditTabVisible': creditLottery.happyMark && (listIndex === creditHappyId)}">
            <section class="creditZh">{{creditList.name}}</section>
            <section class="num" :class="{'numCQ': lotteryId === '003' || lotteryId === '005' && creditNavTrigger !== '005_002' || lotteryId === '1002'&& creditNavTrigger !== '1002_002', 'numPcVery': _Format.groupCodeEvent(creditList.code).creditColor, 'numPcMouse': _Format.groupCodeEvent(creditList.code).waveColor}">
              <article class="creditSel" v-for="(data,dataIndex) in creditList.dataList">
                <p @click="colorSelectionEvent(data,creditList,listIndex,dataIndex, data.amount, '.creditTabMainZH')"
                   v-on:mousedown="colorMouseDown($event,data,creditList,listIndex,dataIndex, data.amount,'.creditTabMainZH')" v-if="data.odds" :class="{'red': _Format.lotColor(data.name, $route.query.code) === 'red' || _Format.lotColor(data.id, $route.query.code) === 'red', 'green': _Format.lotColor(data.name, $route.query.code) === 'green' || _Format.lotColor(data.id, $route.query.code) === 'green', 'blue': _Format.lotColor(data.name, $route.query.code) === 'blue' || _Format.lotColor(data.id, $route.query.code) === 'blue', 'gray': _Format.lotColor(data.name, $route.query.code) === 'gray' || _Format.lotColor(data.id, $route.query.code) === 'gray', 'numSpherical': parseInt(data.name) >= 0, 'creditLotData': data.numTrue, 'creditLot': data.numTrue}">
                  <span class="creditName">{{data.name}}</span>
                  <span class="credAmountDiv">0</span>
                  <span class="credOdds">{{data.odds}}</span>
                </p>
              </article>
            </section>
          </div>
        </div>
        <!--龙虎斗-->
        <div class="creditCombat" v-if="creditLottery.combat">
          <ul>
            <li class="creditTabMainLHD" v-for="(creditList,listIndex) in creditTheListData">
              <article class="creditCombatLi">
                <aside>{{creditList.name}}</aside>
                <section :class="{'creditCombatLiCQ': lotteryId === '003'}" class="displayFlex">
                  <p v-for="(data,dataIndex) in creditList.dataList"
                     @click="colorSelectionEvent(data,creditList,listIndex,dataIndex, data.amount, '.creditTabMainLHD')"
                     @contextmenu="colorMouseDown($event,data,creditList,listIndex,dataIndex, data.amount,'.creditTabMainLHD')"
                     :class="{'creditLotData': data.numTrue}">
                    {{data.name}}
                    <span class="credAmountDiv">0</span>
                    <span class="odds">赔率{{data.odds}}</span>
                  </p>
                </section>
              </article>
            </li>
          </ul>
        </div>
        <!--快乐六合彩 生肖-->
        <div class="markSixContent" v-if="creditLottery.mark">
          <ul class="creditTabMainLHC" v-for="(creditList,listIndex) in creditTheListData">
            <li v-for="(data,dataIndex) in creditList.dataList"
                @click="colorSelectionEvent(data,creditList,listIndex,dataIndex, data.amount, '.creditTabMainLHC')"
                v-on:contextmenu="colorMouseDown($event,data,creditList,listIndex,dataIndex, data.amount,'.creditTabMainLHC')">
              <article class="markSixListData" :class="{'creditLot': data.numTrue, 'red': _Format.lotColor(data.id, $route.query.code) === 'red', 'green': _Format.lotColor(data.id, $route.query.code) === 'green', 'blue': _Format.lotColor(data.id, $route.query.code) === 'blue'}">
                <section>{{data.name}}</section>
                <section>
                  {{data.data}}
                </section>
                <section>赔率: {{data.odds}}</section>
                <span class="credAmountDiv credMarkAmountDiv">0</span>
              </article>
            </li>
          </ul>
        </div>
      </div>
      <div class="creditTabsRight">
        <div class="cPauseSliderVue cPauseCls displayFlex">
          <section class="slider" @click="prevSlider">-</section>
          <section>
            <Slider v-model="value1" :min="smallVal" :max="bigVal" :tip-format="format"></Slider>
          </section>
          <section class="slider" @click="nextSlider">+</section>
        </div>
        <div class="sliderOdds creditSliderOdds">
          <!--/ <span>1880.589</span>-->
          返点<span>{{parseInt(value1)/2}}</span>
        </div>
        <div class="creditAmountList">
          <ul>
            <li v-for="(cred,credIndex) in creditAmountData" :class="{'on': credId === credIndex}"
                @click="creditAmountEvent(credIndex)"><p>{{cred}}</p></li>
            <li @click="creditAmountEvent(8)" :class="{'on': selfSelectedAmount}"><p><input v-model="selfSelectedAmount" type="text" placeholder="自选金额" @change="onInputChangeValue" v-on:blur="changeCount()"/>
            </p></li>
          </ul>
        </div>
        <div class="creditAmountMoney">
          注数:<span>{{theTotal.num}}</span>注, 共计金额:<span>{{theTotal.money}}</span>元
        </div>
        <div class="creditActionBtn displayFlex">
          <a href="javascript:void(0)" @click="empty"><p>清空</p></a>
          <a href="JavaScript:void(0)" @click="athecticSet">{{confirmTxt}}</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import './creditThe.scss';
  import Vue from 'vue';
  import {mapState, mapActions} from 'vuex';
  import lotteryMumColor from '../../../color/data/lottery_num_color';
  import colorDisplayLocalData from '../../../color/data/colorDisplayData';

  export default {
    data() {
      return {
        creditAmountData: ['5', '10', '50', '100', '500', '1000', '1500'],
        confirmTxt: '确定投注',
        isStopSale: false,
        credId: 1,
        value1: 0,
        smallVal: 0,
        bigVal: 8,
        creditTheData: [],
        creditTheDataBackups: [], //初始化数据 old
        creditNavTrigger: '', //玩法组id
        creditNavTriggerName: '', //玩法组名称
        creditTheListData: [], //列表数据
        creditIndex: 0,
        creditLottery: {
          TwoSided: false, //双面
          integration: false, //整合
          combat: false, //龙虎斗
          mark: false, //六合彩
          circular: false, //pc蛋蛋
          happyMark: false, //正码处理
        },
        lotteryId: '', //彩种id
        lotteryName: '', //彩种名称
        creditAmount: 10, //默认金额
        theTotal: {
          num: 0,
          money: 0
        }, //计总
        //计算赔率
        personalOdds: 0, //个人赔率
        officialOdds: 0, //官方赔率
        order: [], //订单数据
        selfSelectedAmount: '',//自选金额
        creditTheDate: '', //本期投注期号
        creditLotteryName: '', //彩种名称
        whetherToSeal: false, //是否封盘
        deactivatedTrue: false,
        thatTwoPlayCode: 0, //二级玩法code
        thatBDVal: {},
        creditHappyId: 0,
      }
    },
    computed: {
      ...mapState({
        recordColorData: state => state.mutations.recordColorData,
        bottomPourData: state => state.mutations.bottomPourData,
      }),
    },
    activated() {
      this.initData();
    },
    deactivated() {
      this.statusInit();
    },
    methods: {
      statusInit() {
        this.creditIndex = 0;
        this.deactivatedTrue = true;
      },
      //初始化
      init() {
        let that = this;
        that.deactivatedTrue = false;
        that.value1 = 0;
        that.credId = 1;
        that.creditAmount = 10;
        that.order = [];
        that.selfSelectedAmount = '';
        that.creditTheListData = [];
        that.creditHappyId = 0;
        that.amountEmpty();
        that.initData();
      },
      //初始化数据
      initData() {
        let that = this,
          index = parseInt(that.$route.query.code);
        let  data = that.recordColorData[index].data;
        that.isStopSale = data.status=='1'?false:true;
        if (!data.code) return;
        that.creditTheDate = data.nowNumber;
        that.creditLotteryName = data.name;
        /*获取官方,个人*/
        that.personalOdds = data.rebate;
        that.officialOdds = data.officialRebate;
        that.bigVal = parseFloat(that.personalOdds) * 2;

        that.creditTheData = data.groupList || [];
        that.lotteryId = data.code;
        that.lotteryName = data.name;
        that.creditNavTrigger = data.groupList[that.creditIndex].code;
        that.creditNavTriggerName = data.groupList[that.creditIndex].name;
        //特殊数据处理
        //pc蛋蛋 特码
        let playListV = data.groupList[that.creditIndex].playList;
        that.$nextTick(function () {
          playListV.forEach((v, i) => {
            v.dataList.forEach((m, n) => {
              m.nameTrue = false;
            })
          });
        });
        that.creditTheListData = playListV;
        let thisCode = that.$route.query.code;
        if (that._Modulation.getLocalDataEvent(thisCode)) {
          that.thatBDVal = lotteryMumColor[0][that._Modulation.getLocalDataEvent(thisCode)].color;
          that.$parent.$refs.lotteryHead.localWave = that.thatBDVal;
        }
        that.dataProcessingCredit();
        that.displayLayer(that.creditNavTrigger, data.groupList[that.creditIndex]);
      },
      creditListEvent(index) {
        let that = this;
        that.creditHappyId = index;
      },
      //数据处理
      dataProcessingCredit() {
        let that = this;
        that.theTotal.num = 0;
        that.theTotal.money = 0;
        that.creditCalculationX();
      },
      //返点计算
      creditCalculationX() {
        let that = this;
        let thatOldData = that._Util.getItem('dataSetItem');
        that.creditTheListData = thatOldData[that.creditIndex].playList;
        let oldData = that.creditTheListData;
        let orderThis = that.order || [],
          orderLen = orderThis.length;
        oldData.forEach((v, i) => {
          v.dataList.forEach((d, y) => {
            d.numTrue = false;
            d.amount = 0;
            d.odds = that._Util.creditRebateCal(d, that.value1, that.officialOdds, that.personalOdds);
            if (orderLen > 0) {
              for (let i = 0; i < orderLen; i++) {
                if ((v.name === orderThis[i].playedGroupName) && (d.name === orderThis[i].actionData)) {
                  orderThis[i].odds = d.odds;
                  orderThis[i].rebate = parseInt(that.value1) / 2;
                  d.numTrue = true;
                }
              }
            }
          })
        });
      },
      creditNavEvent(code, index) {
        let that = this;
        that.creditNavTrigger = code;
        that.creditIndex = index;
        that.init();
      },
      displayLayerStatus() {
        let that = this;
        that.creditLottery.TwoSided = false;
        that.creditLottery.integration = false;
        that.creditLottery.combat = false;
        that.creditLottery.mark = false;
        that.creditLottery.happyMark = false;
      },
      displayLayer(code) {
        let that = this;
        that.displayLayerStatus();
        let twoSidedData = colorDisplayLocalData[0].twoSided[code], //双面
          integrationData = colorDisplayLocalData[0].integration[code], //整合
          tigerData = colorDisplayLocalData[0].tiger[code], //龙虎斗
          zodiacData = colorDisplayLocalData[0].zodiac[code], //生肖
          twoNavData = colorDisplayLocalData[0].twoNav[code]; //二级导航
        if (twoSidedData) {
          that.creditLottery.TwoSided = true;
        }
        if (integrationData) {
          that.creditLottery.integration = true;
        }
        if (tigerData) {
          that.creditLottery.combat = true;
        }
        if (zodiacData) {
          that.creditLottery.mark = true;
        }
        if (twoNavData) {
          that.creditLottery.happyMark = true;
        }

      },
      creditAmountEvent(index) {
        this.selfSelectedAmount = '';
        this.credId = index;
        this.creditAmount = this.creditAmountData[parseInt(index)];
      },
      onInputChangeValue(val) {

      },
      changeCount() {
        if (!this.selfSelectedAmount) {
          this.credId = 1;
          this.creditAmount = 10;
        }
        if (parseInt(this.selfSelectedAmount) == '0') {
          this.selfSelectedAmount = '1';
        }
      },
      colorSelectionEvent(data, creditList, listIndex, dataIndex, amount, clsObj) {
        let that = this;
        data.numTrue = true;
        if (!that.selfSelectedAmount) {
          false;
        } else {
          that.creditAmount = that.selfSelectedAmount;
        }
        amount = parseInt(amount) + parseInt(that.creditAmount);
        data.amount = amount;
        if(amount > 9999) {
          amount = (amount / 10000).toFixed(1) + "w";
        }
        $(clsObj).eq(listIndex).find('.credAmountDiv').eq(dataIndex).addClass('credAmountAnimation').text(amount);
        that.retentionInputData(data, creditList, true);
      },
      colorMouseDown(e, data, creditList, listIndex, dataIndex, amount, clsObj) {
        let that = this;
        data.numTrue = false;
        if (e.which == 3) {
          data.amount = 0;
          var amount = data.amount;
          $(clsObj).eq(listIndex).find('.credAmountDiv').eq(dataIndex).removeClass('credAmountAnimation').text(amount);
          that.retentionInputData(data, creditList, false);
          e.preventDefault();
        }
      },
      format(val) {
        this.value1 = val;
      },
      prevSlider() {
        let that = this;
        if (that.value1 <= 0) return;
        that.value1 = parseInt(that.value1) - 1;
      },
      nextSlider() {
        let that = this;
        if (that.value1 >= that.bigVal) return;
        that.value1 = parseInt(that.value1) + 1;
      },
      //清空
      empty() {
        let that = this;
        that.init();
        that.dataProcessingCredit();
      },
      amountEmpty() {
        $('.credAmountDiv').each(function () {
          $(this).removeClass('credAmountAnimation');
        })
      },
      //保留投注数据
      retentionInputData(data, creditList, status) {
        //投注数据
        let that = this;
        let injectionData = {
          // playedGroupCode: creditList.code,        //玩法组code
          playedGroupCode: that.creditNavTrigger,
          playedGroupName: creditList.name,           //玩法组名称
          playedId: data.id,                          //玩法id
          playedName: data.name,                      //玩法名称
          actionNum: 1,                               //单个玩法注数
          actionData: data.name,                      //投注注数
          rebate: parseInt(that.value1) / 2,          //返点
          rebateAmount: 0,
          amount: data.amount,                        //金额
          odds: data.odds,                            //赔率
          mode: 2,                                    //模式   1.官方   2信用
          multiple: 1
        };
        that.addOrder(injectionData, status);
      },
      //添加订单数据
      addOrder(data, status) {
        let that = this,
          len = that.order.length,
          u = 0;
        if (len === 0) {
          that.order.push(data);
        } else {
          that.order.forEach((v, i) => {
            if (v.playedId === data.playedId) {
              u++;
              if (status) {
                that.order.splice(i, 1, data);
                return;
              } else if (!status) {
                that.order.splice(i, 1);
                return;
              }
            } else if (len - 1 === i && u === 0) {
              that.order.push(data);
            }
          });
        }
        that.totalCalVal();
      },
      //计算总额
      totalCalVal() {
        let that = this,
          amountObj = that._Util.totalNumberNotes(that.order);
        that.theTotal.num = amountObj.num;
        that.theTotal.money = amountObj.amount;
      },
      //确定投注
      athecticSet() {
        let that = this;
        if(that.isStopSale){
          that._Util.showAlert('暂停销售');
          return;
        }
        if (that.whetherToSeal) {
          that._Util.showAlert('已封盘');
          return;
        }
        if (that.order.length > 0) {
          let athectData = {
            number: that.creditTheDate,
            name: that.creditLotteryName,
            data: that.order
          };
          that.$store.commit('INIT_LOTTERY_DATA', athectData);
          that.$parent.setABetTrue = true;
        } else {
          that._Util.showAlert('你还没有投注记录');
        }
      }
    },
    watch: {
      'recordColorData': {
        handler: function () {
          if (this.deactivatedTrue) return;
          this.init();
        },
        deep: true
      },
      '$route.query.code'() {
        if (!this.$route.query.code) return;
        if(this.$route.name === 'credit') {
          this.init();
          this.creditIndex = 0;
        }
      },
      'value1'() {
        this.creditCalculationX();
      },
      'bottomPourData'() {
        if (this.bottomPourData) {
          this.whetherToSeal = true;
        } else {
          this.whetherToSeal = false;
        }
      },
      'selfSelectedAmount'(val) {
        this.selfSelectedAmount = val.replace(/[^0-9]/g, '');
      },
      'isStopSale'(val){
        if(val){
          this.confirmTxt = '暂停销售';
        }else{
          if(this.whetherToSeal){
            this.confirmTxt = '已封盘';
          }else{
            this.confirmTxt = '确定投注';
          }
        }
      },
      'whetherToSeal'(val){
        if(val){
          this.confirmTxt = '已封盘';
        }else{
          this.confirmTxt = '确定投注';
        }
      }
    }
  }
</script>
